<template>
  <s-layout :title="state.text + '详情'" :navbar="normal" leftIconColor="#333333" :autoBack="true" :bgColor="state.bgColor"
    :tabbarshow="false" :titleStyle="{ color: '#333333', fontSize: '32rpx' }" :onShareAppMessage="shareInfo">
    <!-- 头部盒子 -->
    <view class="background" v-if="details"
      :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/staff_v1/baomingxiangqing.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <scroll-view scroll-y class="comprehensive area">
        <view class="list ">
          <view class="title"><fui-overflow-hidden :text="details.title" :rows="2"
              fontWeight="600"></fui-overflow-hidden></view>
          <view class="state">• 状态：{{ state_name }}</view>
          <view class="Agency_amount_box" v-if="details.can_share ">
            <view class="left_box">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jine@2.png`" mode="scaleToFill" />
              </view>
              <view class="caption_text">金额(男/女)：</view>
              <view class="money">

                <text>
                  ￥{{ details.man_salary }}
                </text>
                /
                <text>
                  ￥{{ details.woman_salary }}
                </text>

              </view>
            </view>
            <view class="right_box" @tap="change_agent_amount(details,'money')" v-if="details.state <= 1 && userStore.userInfo.group_id  == 5">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`"
                  mode="scaleToFill" />
              </view>
              <view class="edit_box">修改</view>
            </view>
          </view>
          <view class="Agency_amount_box" v-if="details.can_share">
            <view class="left_box">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_Jobtitle.png`" mode="scaleToFill" />
              </view>
              <view class="caption_text">需求人数(男/女)：</view>
              <view class="money">

                <text>
                  {{ details.man_num }}人
                </text>
                /
                <text>
                  {{ details.woman_num }}人
                </text>

              </view>
            </view>
            <view class="right_box" @tap="change_agent_amount(details,'num')" v-if="details.state <= 1  && userStore.userInfo.group_id  == 5">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`"
                  mode="scaleToFill" />
              </view>
              <view class="edit_box">修改</view>
            </view>
          </view>
          <view class="Agency_amount_box" v-if="userStore.userInfo.group_id  !== 5">
            <view class="left_box">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_Jobtitle.png`" mode="scaleToFill" />
              </view>
              <view class="caption_text">代招工金额(男/女)：</view>
              <view class="money">

                <text v-if="!details.agent">
                  ￥{{ details.agent_man_salary }}
                  </text>
                  <text v-else>
                  <template v-if="details.agent.agent_man_salary == 0 && details.agent.agent_woman_salary == 0">
                      ￥{{ details.agent.agent_man_salary_max }}
                  </template>
                  <template v-else>
                      ￥{{ details.agent.agent_man_salary }}
                  </template>
                  </text>
                  /
                  <text v-if="!details.agent">
                  ￥{{ details.agent_woman_salary }}
                  </text>
                  <text v-else>
                  <template v-if="details.agent.agent_man_salary == 0 && details.agent.agent_woman_salary == 0">
                      ￥{{ details.agent.agent_woman_salary_max }}
                  </template>
                  <template v-else>
                      ￥{{ details.agent.agent_woman_salary }}
                  </template>
                </text>

              </view>
            </view>
            <view class="right_box" @tap="change_agent_amount(details,'recruitment')" v-if="details.state <= 1  ">
              <view class="image">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/wodedaili_icon_jinexiugai@2.png`"
                  mode="scaleToFill" />
              </view>
              <view class="edit_box">修改</view>
            </view>
          </view>
          <view class="list_item" >
            <!-- 头像 -->
            <view class="head_box">
                <image :src="`${baseUrl}` + details.user?.avatar" mode="aspectFill" />
            </view>
            <!-- 信息盒子 -->
            <view class="message_box">
                <view class="message_title">{{ details.user?.nickname }}</view>
                <view class="mes_flex">
                    <view class="message_time" @tap="callphone(details.user?.mobile)">
                      <image
                        :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_callnumber.png`"
                        mode="scaleToFill"
                        v-if="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_callnumber.png`"
                      />
                        <text>
                          电话：{{ details.user?.mobile}}
                        </text>
                    </view>
                </view>
            </view>
          </view>
          <view class="item">
            <view class="item_title">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/Myinterview_icon_location@2 (1).png`"
                mode="scaleToFill" />
              <text>工时:</text>
            </view>
            <view class="item_cont">{{ details.man_hour }} 小时</view>
          </view>
          <view class="item">
            <view class="item_title">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/Myinterview_icon_location@2 (2).png`"
                mode="scaleToFill" />
              <text>报名人数:</text>
            </view>
            <view class="item_cont">男：{{ details.man_apply_total }}    女：{{ details.woman_apply_total }} </view>
          </view>
          <view class="item">
            <view class="item_title">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/Myinterview_icon_location@2.png`"
                mode="scaleToFill" />
              <text>用工地点：</text>
            </view>
            <view class="item_cont">{{ details.address }}</view>
          </view>
          <view class="item">
            <view class="item_title">
              <image :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" mode="scaleToFill" />
              <text>班次时间：</text>
            </view>
            <view class="item_cont">{{ details.date }} {{ details.start_time }} ~ {{ details.end_time }}</view>
          </view>
         
          <view class="item">
            <view class="item_title">
              <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill" />
              <text class="blue">用工需求</text>
            </view>
            <view class="item_cont">
              <view class="demand">
                <u-parse :content="details.demand" :show-with-animation="true"></u-parse>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="button" v-if="details.can_share">
        <button class="orange" @tap="onShareGoods(item)" v-if="details.can_share">
          <image :src="`${baseUrl}/uploads/uniapp_image/user/renwuliebiao_icon_share.png`" mode="scaleToFill" />
          <text>分享招人</text>
        </button>
        <button class="blue" @tap="lookdetails()">
          <view class="image">
            <image :src="`${baseUrl}/uploads/uniapp_image/staff/shangjixiangqing_icon_pepolelist.png`"
              mode="scaleToFill" />
          </view>
          <text>查看报名</text>
        </button>
      </view>
    </view>
    <s-public-models
        :show="popshows" 
        :imagesucceedSrc="dataToinformaion.imageSrc" 
        :subtitle="dataToinformaion.subtitle"  
        :hint="dataToinformaion.hint" 
        :distinction="dataToinformaion.distinction" 
        :editAgency="dataToinformaion.editAgency"
        
       
        @cancel="manhourClose" 
        @affirm="manhourSubmit"
        :click_type="dataToinformaion.click_type" 
        :list="edit_list">
        </s-public-models>
 
  </s-layout>
  <!-- 设置金额弹出层 -->
  <!-- <s-public-models :show="popshows" :imagesucceedSrc="dataToinformaion.imageSrc" :subtitle="dataToinformaion.subtitle"
    :hint="dataToinformaion.hint" :editAgency="true" @cancel="manhourClose" @affirm="manhourSubmit"
    :click_type="dataToinformaion.click_type" :list="edit_list"> -->


</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import tools from '@/sheep/helper/tools.js';
const { safeAreaInsets } = uni.getSystemInfoSync()
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
const user_ids= sheep.$store('user').userInfo.id
const state = reactive({
  bgColor: 'rgba(0,0,0,0)',
  text: ''
})
const schedule_id = ref()
const user_id = ref()
onLoad((options) => {

  schedule_id.value = options.id
  user_id.value = options.user_id
  state.text = options.title
  getScheduleView()
});

// 详情内容
const details = ref()
const state_name = ref()
const getScheduleView = async () => {
  let params = {
    ids: schedule_id.value,
  }
  const res = await sheep.$api.project.getScheduleView(params);
  details.value = res.data
  if (res.data.state == 0) {
    state_name.value = '待开始'
  } else if (res.data.state == 1) {
    state_name.value = '进行中'
  } else if (res.data.state == 2) {
    state_name.value = '已结束'
  } else if (res.data.state == 3) {
    state_name.value = '已终止'
  } else if (res.data.state == 4) {
    state_name.value = '已作废'
  }
}
//打电话
const callphone = (e)=>{
  tools.callPhone(e)
}
// 修改代理商金额
const edit_ids = ref()
const edit_list = ref()
const popshows = ref(false)

const edit_money =ref({
        man_salary:0,
        woman_salary:0,
        man_number:0,
        woman_number:0
    })
    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        distinction:'',
        editAgency:false,
        click_type:''
    })
    const post_data = ref()
const change_agent_amount = (e,a) => {
  post_data.value = e
  edit_ids.value = e.id
    popshows.value = true
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
    if(a == 'num'){
        dataToinformaion.value.subtitle = '修改需求人数'
        dataToinformaion.value.hint =  '修改人数后会覆盖已修改的需求人数'
        dataToinformaion.value.distinction = 'number'
        dataToinformaion.value.click_type ='number'
        dataToinformaion.value.editAgency = false
        edit_list.value = e

    }else if(a == 'money'){
        dataToinformaion.value.editAgency = true
        dataToinformaion.value.click_type ='staff'
        dataToinformaion.value.subtitle = '修改金额'
        dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
        edit_list.value = e
  
    }else{
      if(e.agent) {
      edit_list.value = e.agent
      } else {
      edit_list.value = e
      }
      dataToinformaion.value.editAgency = true
      dataToinformaion.value.click_type ='agency'
      dataToinformaion.value.subtitle = '修改招工金额'
      dataToinformaion.value.hint =  '修改金额后会覆盖已修改的金额'
      dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
    }

  
}
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
        edit_money.value =''
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {

        if(i == 'number'){
            let params = {
                ids: edit_ids.value ,
            }
            edit_money.value.man_number = Number(e)
            edit_money.value.woman_number = Number(a)
            params.man_num =  Number(edit_money.value.man_number)
            params.woman_num =  Number(edit_money.value.woman_number)
            const res = await sheep.$api.project.postScheduleEdit(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                  details.value = ''
                  popshows.value = false
                  getScheduleView()
                    edit_money.value.man_number=0
                    edit_money.value.woman_number=0
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2];
                    prevPage.onLoad(prevPage.options);	
                },500)
            }else{
                sheep.$helper.toast(res.msg);
            }
        }else if( dataToinformaion.value.click_type == 'staff'){
            let params ={
                ids: edit_ids.value,
                man_salary:Number(e),
                woman_salary: Number(a)
            }
            const res = await sheep.$api.project.postScheduleEdit(params);
            if(res.code == 1){
                sheep.$helper.toast(res.msg);
                setTimeout(()=>{
                  details.value = ''
                  popshows.value = false
                  getScheduleView()
                    popshows.value = false
                    edit_money.value.man_salary=0
                    edit_money.value.woman_salary=0
                    dataToinformaion.value.editAgency = true
                    dataToinformaion.value.distinction = ''
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2];
                    prevPage.onLoad(prevPage.options);	
                },500)
            } else {
                sheep.$helper.toast(res.msg);
            }
        }else{
          
          if(post_data.value.agent) {
              if(e > Number(post_data.value.agent.agent_man_salary_max) || a > Number(post_data.value.agent.agent_woman_salary_max)) {
              sheep.$helper.toast('修改不能大于限制金额');
              return
              }
          } else {
              if(e > Number(post_data.value.agent_man_salary) || a > Number(post_data.value.agent_woman_salary)) {
              sheep.$helper.toast('修改不能大于限制金额');
              return
              }
          }
          let params ={
            share_id:user_ids,
            schedule_id: schedule_id.value,
            agent_man_salary:Number(e),
            agent_woman_salary:Number(a),
        }
        const res = await sheep.$api.agency.editAgentByScheduleid(params);
        if(res.code == 1){
            sheep.$helper.toast(res.msg);
            details.value = ''
            popshows.value = false
            getScheduleView()
            setTimeout(()=>{
              edit_money.value.man_number=0
              edit_money.value.woman_number=0
              dataToinformaion.value.editAgency = true
              dataToinformaion.value.distinction = ''
              let pages = getCurrentPages();
              let prevPage = pages[pages.length - 2];
              prevPage.onLoad(prevPage.options);	
            },500)
        } else {
            sheep.$helper.toast(res.msg);
        }
    
        }
    }
//分享招人 
const share = ref({
  title: '',
  address: '',
  date: '',
  id: ''
})
// /移除HTML标签
const delTag = (str) => {
  return str.replace(/<[^>]+>/g, "");
}
//分享招人
const onShareGoods = () => {
  let htmlContent = delTag(details.value.demand)
  share.value.title = details.value.title
  share.value.address = details.value.address
  share.value.id = details.value.id
  share.value.date = details.value.date + ' ' + details.value.start_time + '--' + details.value.end_time
  share.value.employeeNeeds = htmlContent
  showShareModal();
}
const shareInfo = computed(() => {
  // if (isEmpty(state.value.data)) return {};
  return sheep.$platform.share.getShareInfo(
    {
      title: share.value.title,
      desc: share.value.address,
      params: {
        page: '3',
        query: share.value.id
      },
    },
    {
      type: 'clock_in', // 商品海报
      title: share.value.title,
      desc: share.value.address,
      signUpTime: share.value.date,
      employeeNeeds: share.value.employeeNeeds,
    },
  );
});
//查看报名
const userStore = sheep.$store('user');
const lookdetails = () => {
  if (userStore.userInfo.group_id == 11) {
    sheep.$router.go('/subpackage/user/user/personnel_list', {
      schedule_id: schedule_id.value,
      task_name: '任务人员列表'
    })
  } else {
    sheep.$router.go('/subpackage/user/task/order_registration_details', {
      id: details.value.id
    })
  }

}
</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

.background {
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.comprehensive {
  height: 63vh;
  margin-top: 255rpx;
  border-radius: 16rpx;
  background-color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
}

.list {


  .title {
    margin: 40rpx 30rpx;
    color: #333333;
    font-weight: 600;
    font-size: 36rpx;
  }

  .state {
    margin: 30rpx;
    color: #FF6120;
    font-weight: 500;
    font-size: 28rpx;
  }

  .item {
    margin: 0 30rpx 30rpx 30rpx;
    display: flex;
    flex-direction: column;

    .item_title {
      height: 56rpx;
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      text {
        color: #333333;
        font-weight: 600;
        font-size: 28rpx;
        font-family: PingFangSC;
      }

      .blue {
        color: #0038F7;
      }
    }

    .item_cont {
      margin-left: 60rpx;
      color: #666666;
      font-weight: 500;
      font-size: 28rpx;

      .demand {
        color: #333333;
        border-radius: 16rpx;
        background-color: #F8F9FF;
        padding: 20rpx;
      }
    }

    &:last-child {
      .item_cont {
        margin-left: 0;
      }

    }
  }
}

.button {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #FFFFFF;
  height: 146rpx;
  display: flex;
  justify-content: space-around;
  padding-top: 20rpx;

  .orange {
    border-radius: 45rpx;
    border: 2rpx solid #FF6600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90rpx;
    background: #fff;
    width: calc(50% - 60rpx);
    color: #FF6600;
    font-weight: 600;
    font-size: 34rpx;

    image {
      width: 26rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }
  }

  .blue {
    background: #fff;
    border-radius: 45rpx;
    border: 2rpx solid #0038F7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90rpx;
    width: calc(50% - 60rpx);
    color: #0038F7;
    font-weight: 600;
    font-size: 34rpx;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 10rpx;
    }
  }
}

:deep(.u-icon__icon) {
  background: #fff;
  width: 64rpx;
  height: 64rpx;
  justify-content: center;
  border-radius: 50%;

}

// 代理金额盒子
.Agency_amount_box {
  font-family: PingFangSC;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  background-color: #F9FBFF;
  height: 52rpx;
  padding: 0 30rpx;
  margin-bottom: 10rpx;

  .left_box {
    display: flex;
    align-items: center;

    .caption_text {
      color: #333333;
      font-size: 22rpx;
      font-weight: 500;
    }

    .money {
      color: #FF0000;
      font-size: 22rpx;
      font-weight: 600;
    }

    .image {
      margin-left: 12rpx;
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      margin-right: 12rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .right_box {
    display: flex;
    align-items: center;
    margin-right: 10rpx;

    .edit_box {
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 500;
      font-size: 22rpx;
      font-style: normal;
      text-decoration: none;
      text-align: left;
    }

    .image {
      width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      margin-right: 10rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 已设置
.have_set {
  font-family: PingFangSC;
  color: #0038F7;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FFFFFF;
  border: 1px solid #0038F7;
  width: 70rpx;
  height: 28rpx;
}

// 未设置
.Is_not_set {
  font-family: PingFangSC;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  border-radius: 4px;
  background-color: #FF5100;
  width: 70rpx;
  height: 28rpx;
}

// 列表项
.list_item {
  height: 146rpx;
  display: flex;
  align-items: center;
  margin: 10rpx 30rpx 20rpx 30rpx;
  border-bottom: 1rpx solid #EFEFEF;
  // 头像盒子
  .head_box {
      width: 104rpx;
      height: 104rpx;

      image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
      }
  }

  // 信息盒子
  .message_box {
      margin-left: 30rpx;

      .message_title {
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: $uni-font-weight;
          font-size: 30rpx;
          font-style: normal;
          text-decoration: none;
          margin-bottom: 4rpx;
      }


      .message_time {
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 500;
          font-size: $uni-font-size-sm;
          font-style: normal;
          text-decoration: none;
          display: flex;
          align-items: center;
          image{
            width: 38rpx;
            height: 38rpx;
          }
          text {
              display: block;
              margin-left: 10rpx;
              color: $uni-color-primary;
              font-weight: 400;
              font-size: 22rpx;
          }
      }
  }
}




</style>